<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col v-for="(item, index) in amountList" :key="index" :span="6" :xs="24" :sm="12" :lg="6">
        <count-card :countCard="item" />
      </el-col>
    </el-row>

    <div class="charts">
      <el-row :gutter="10">
        <el-col :span="7">
          <chart-card title="销售饼图">
            <pie-echarts :pieData="pieData" />
          </chart-card>
        </el-col>
        <el-col :span="10">
          <chart-card title="销售地图">
            <map-echarts :mapData="mapData" :mapJSON="mapJSON" mapName="china" />
          </chart-card>
        </el-col>
        <el-col :span="7">
          <chart-card title="销售玫瑰图">
            <rose-echarts :roseData="roseData" />
          </chart-card>
        </el-col>
      </el-row>
    </div>

    <div class="charts bottom-charts">
      <el-row :gutter="10">
        <el-col :span="12">
          <chart-card title="销售折线图">
            <line-echarts :lineData="lineData" />
          </chart-card>
        </el-col>
        <el-col :span="12">
          <chart-card title="销售柱形图">
            <bar-echarts :barData="barData" />
          </chart-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import useAnalysisStore from '@/store/main/analysis/analysis'
  import countCard from './components/count-card/count-card.vue'
  import chartCard from './components/chart-card/chart-card.vue'
  import { pieEcharts, lineEcharts, roseEcharts, barEcharts, mapEcharts } from '@/components/page-echarts'
  import mapJSON from '@/components/page-echarts/data/china.json'
  import { storeToRefs } from 'pinia'
  import { computed } from 'vue'
  const analysisStore = useAnalysisStore()
  analysisStore.fetchAnalysisDataAction()
  const { amountList, goodsCategoryCount, goodsCategorySale, goodsCategoryFavor, goodsAddressSale } = storeToRefs(analysisStore)

  const pieData = computed(() =>
    goodsCategoryCount.value.map((o) => ({
      ...o,
      value: o.goodsCount
    }))
  )

  const roseData = computed(() =>
    goodsCategorySale.value.map((o) => ({
      ...o,
      value: o.goodsCount
    }))
  )

  const lineData = computed(() => {
    let xAxisData = goodsCategorySale.value.map((o) => o.name)
    let seriesData = goodsCategorySale.value.map((o) => +o.goodsCount)
    return {
      xAxisData,
      seriesData
    }
  })

  const barData = computed(() => {
    let xAxisData = goodsCategoryFavor.value.map((o) => o.name)
    let seriesData = goodsCategoryFavor.value.map((o) => +o.goodsFavor)
    return {
      xAxisData,
      seriesData
    }
  })

  const mapData = computed(() =>
    goodsAddressSale.value.map((o) => ({
      ...o,
      name: o.address,
      value: o.count
    }))
  )
</script>

<style lang="scss" scoped>
  .dashboard {
    .charts {
      margin-top: 10px;
      height: 240px;
      .el-row {
        height: 100%;
      }
    }

    .pie-echarts,
    .line-echarts,
    .rose-echarts {
      height: 100%;
      :deep(.base-echart) {
        height: 100%;
        .echarts {
          height: 100%;
        }
      }
    }

    .bottom-charts {
      margin-top: 80px;
      height: 190px;
    }
  }
</style>
